<template>
	<div>
		<p class="canvas-title">
			{{ props.info.title }}


		</p>
		<div class="number-bord">
    <div class="display-row">
      <div class="display-input" :class="{ disabled: disabled }">{{ displayValue }}</div>
      <button class="backspace-btn" :class="{ disabled: disabled }" :disabled="disabled" @click="backspace">←</button>
    </div>
    <div class="keypad">
      <div class="keypad-row">
        <button class="key-btn" :class="{ disabled: disabled }" :disabled="disabled" @click="inputNumber('1')">1</button>
        <button class="key-btn" :class="{ disabled: disabled }" :disabled="disabled" @click="inputNumber('2')">2</button>
        <button class="key-btn" :class="{ disabled: disabled }" :disabled="disabled" @click="inputNumber('3')">3</button>
      </div>
      <div class="keypad-row">
        <button class="key-btn" :class="{ disabled: disabled }" :disabled="disabled" @click="inputNumber('4')">4</button>
        <button class="key-btn" :class="{ disabled: disabled }" :disabled="disabled" @click="inputNumber('5')">5</button>
        <button class="key-btn" :class="{ disabled: disabled }" :disabled="disabled" @click="inputNumber('6')">6</button>
      </div>
      <div class="keypad-row">
        <button class="key-btn" :class="{ disabled: disabled }" :disabled="disabled" @click="inputNumber('7')">7</button>
        <button class="key-btn" :class="{ disabled: disabled }" :disabled="disabled" @click="inputNumber('8')">8</button>
        <button class="key-btn" :class="{ disabled: disabled }" :disabled="disabled" @click="inputNumber('9')">9</button>
      </div>
      <div class="keypad-row">
        <button class="key-btn zero-btn" :class="{ disabled: disabled }" :disabled="disabled" @click="inputNumber('0')">0</button>
        <button class="confirm-btn" :class="{ disabled: disabled }" :disabled="disabled" @click="confirm">{{ disabled ? t('game.numberPad.answered') : t('game.numberPad.confirm') }}</button>
      </div>
    </div>
	</div>

  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

// 翻译系统
const translationVersion = ref(0)
let t = (key: any, params?: any) => {
	const keys = key.split('.')
	let current: any = translations.value
	for (const k of keys) {
		if (current && typeof current === 'object') {
			current = current[k]
		} else {
			return key
		}
	}
	if (typeof current === 'string' && params) {
		return current.replace(/\{(\w+)\}/g, (match: any, key: any) => params[key] || match)
	}
	return current || key
}

const translations = ref<any>({})

async function initTranslations() {
	try {
		const currentLang = localStorage.getItem('language') || 'zh-CN'
		let langModule
		if (currentLang === 'en-US') {
			langModule = await import('../../../i18n/locales/en-US')
		} else {
			langModule = await import('../../../i18n/locales/zh-CN')
		}
		translations.value = langModule.default
		translationVersion.value++
	} catch (error) {
		console.error('Failed to load translations:', error)
	}
}

const props = defineProps({
	info: {
		type: Object,
		default: () => ({})
	},
	disabled: {
		type: Boolean,
		default: false
	},
	savedAnswer: {
		type: String,
		default: ''
	}
})
const displayValue = ref('')
const emit = defineEmits(['confirm'])

// 监听savedAnswer变化，恢复之前的答案
watch(() => props.savedAnswer, (newValue) => {
	displayValue.value = newValue || ''
}, { immediate: true })

// 监听题目变化，清空未确认的输入
watch(() => props.info, (newInfo, oldInfo) => {
	// 如果是新题目，检查是否有保存的答案
	if (newInfo && oldInfo && newInfo !== oldInfo) {
		// 如果没有保存的答案，清空输入框
		if (!props.savedAnswer) {
			displayValue.value = ''
		}
	}
})

function inputNumber(num: string) {
	if (props.disabled) return
  displayValue.value += num
}
function backspace() {
	if (props.disabled) return
  displayValue.value = displayValue.value.slice(0, -1)
}
function confirm() {
	if (props.disabled) return
	
	if (displayValue.value == props.info.answer) {
		window.messageRef?.show(t('game.numberPad.answerCorrect'), 'success')
		emit('confirm', {
			value: displayValue.value,
			correct: true
		})
	} else { 
		window.messageRef?.show(t('game.numberPad.answerWrong'), 'error')
		emit('confirm', {
			value: displayValue.value,
			correct: false
		})
	}
}
function clear() {
  displayValue.value = ''
}
defineExpose({ clear })

onMounted(async () => {
	// 初始化翻译
	await initTranslations()
})
</script>

<style scoped>
.canvas-title {
	width: 60vw;
	padding: 10px 0;
	text-align: center;
	font-size: 30px;
	margin: 0;
	margin-top: 50px;
	margin-bottom: 50px;
	background-color: rgba(0, 0, 0, 0.2);
}
.number-bord {
  background: #eaf2f7;
  border-radius: 12px;
  padding: 12px;
  width: 480px;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.display-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.display-input {
  flex: 1;
  height: 64px;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 38px;
  color: #888;
  padding: 0 18px;
  box-sizing: border-box;
}
.backspace-btn {
  width: 64px;
  height: 64px;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  font-size: 28px;
  color: #888;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.backspace-btn:hover {
  background: var(--theme-secondary);
  color: #fff;
}
.keypad {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.keypad-row {
  display: flex;
  gap: 12px;
}
.key-btn {
  flex: 1;
  height: 72px;
  background: #f8fbfc;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  font-size: 36px;
  color: #888;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.key-btn:hover {
  background: var(--theme-secondary);
  color: #fff;
}
.zero-btn {
}
.confirm-btn {
  flex: 2;
  height: 72px;
  background: #f8fbfc;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  font-size: 28px;
  color: #888;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-btn:hover {
  background: var(--theme-primary);
  color: #fff;
}
.display-input.disabled {
  background: #f0f0f0;
  color: #999;
}

.backspace-btn:disabled,
.key-btn:disabled,
.confirm-btn:disabled {
  background: #f0f0f0 !important;
  color: #ccc !important;
  cursor: not-allowed !important;
  border-color: #e0e0e0 !important;
}

.backspace-btn.disabled,
.key-btn.disabled,
.confirm-btn.disabled {
  background: #f0f0f0 !important;
  color: #ccc !important;
  cursor: not-allowed !important;
}
</style>
